{% load static %}

 <!DOCTYPE html>

<html class='theme-dark' >
	
	<head>
		<title>u4xg</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="{% static 'u4xg_game/w3.css' %}">
		<link rel="stylesheet" href="{% static 'u4xg_game/u4xg.css' %}">
		<script src="{% static 'u4xg_game/u4xg.js' %}"></script>
	</head>
	
	<body class='z1'>
		
		<header class="w3-container z2 w3-top w3-hide-large w3-padding w3-xlarge">
			<a href="#" class="w3-button w3-margin-right" onclick="hideShowable(); innerpage_mobilemenu.style.display='block'">☰</a><span><b>u4xg</b></span>
		</header>
		
		<div class="w3-sidebar z2 w3-collapse w3-top w3-large w3-padding sidebar ">
		<div class="w3-container ">
			<h3 class="w3-padding-64"><b>u4xg</b></h3>
		</div>
		<div class="w3-bar-block">
					<div onclick="hideShowable(); innerpage_about.style.display='block'" class="w3-button w3-bar-item" >about</div>
					<div onclick="hideShowable(); innerpage_login.style.display='block'" class="w3-button w3-bar-item" >log in</div>
					<div onclick="hideShowable(); innerpage_register.style.display='block'" class="w3-button w3-bar-item" >register</div>
					<div class="w3-button w3-bar-item" ><br></div>
					<div onclick="toggleTheme();" class="w3-button w3-bar-item" >switch theme</div>
		</div>
		</div>
		
		<div class="w3-main innerpage_container">
			<noscript><h1>sorry, can't play without javascript</h1></noscript>
			
			<div id="space-for-top-menu" class='w3-container w3-padding w3-xlarge w3-hide-large'><div class="w3-button"><br></div></div>
			
			<div id='innerpage_mobilemenu' class="w3-container innerpage_menu showable w3-padding w3-xlarge w3-hide-large" style='display:none'>
				<br>
				<div class="w3-bar-block">
					<b>
					<div onclick="hideShowable(); innerpage_about.style.display='block'" class="w3-button z2 w3-bar-item  mobile_button" >about</div>
					<div onclick="hideShowable(); innerpage_login.style.display='block'" class="w3-button z2 w3-bar-item  mobile_button" >login</div>
					<div onclick="hideShowable(); innerpage_register.style.display='block'" class="w3-button z2 w3-bar-item  mobile_button" >register</div>
					</b>
				</div>
			</div>
			<div id="innerpage_about" class="w3-container showable innerpage_content" style="display:{{ about_display }}">
				<h2 class=w3-xxxlarge><b>About</b></h2>
				<hr class="z1" style="width:100%;border:3px solid ">
				
				<p> u4xg - unnamed 4X game -a game inspired by <a>Neptunes Pride</a> and  FreeOrion where you play online against other players and try to be the first to colonise the majority of star systems in the galaxy. forge alliances, trade, fight for resources, backstab your allies or plot against a common enemy. anything goes. there is no garantee about trading agreements or military agreements, and diplomacy is key to success.
		the game is turn based, but actions takes hours to happen, so on practical terms it's real time. each turn usually takes 15 minutes, but you wont need to take action every turn so a few commands a day should be enough to keep your empire running.
				</p>
			</div>
			
			<div id="innerpage_login" class="w3-container showable innerpage_content" style="display:{{ login_display }}">
				<h2 class="w3-xxxlarge"><b>Log In</b></h2>
				<hr class="z1" style="width:100%;border:3px solid ">
				
				<form method="post" action="{% url 'login' %}">
					{% csrf_token %}
						{% for field in login_form.visible_fields %}
						<div class='w3-padding z2'>
						<div class='w3-row'>
							<div class='w3-quarter' style='padding:8px'>{{ field.label_tag }}</div>
							<div class='w3-threequarter'style='padding:8px'>{{ field }}</div>
						</div>
						{% if field.errors %}
						<div class='w3-row w3-panel w3-red'>
							{{ field.errors }}
						</div>
						{% endif %}
						</div>
						<br>
					{% endfor %}
					<button type="submit" class='w3-button u4xg_button' style='float:right;'>log in</button>
				</form>
			</div>
			
			<div id="innerpage_register" class="w3-container showable innerpage_content" style="display:{{ register_display }}">
				<h2 class="w3-xxxlarge"><b>Registration Form</b></h2>
				<hr class="z1" style="width:100%;border:3px solid ">
				
				<form method="post" action="{% url 'register' %}">
					{% csrf_token %}
					{% for field in registration_form.visible_fields %}
						<div class='w3-padding z2'>
						<div class='w3-row'>
							<div class='w3-quarter' style='padding:8px'>{{ field.label_tag }}</div>
							<div class='w3-threequarter 'style='padding:8px'>{{ field }}</div>
						</div>
						{% if field.errors %}
						<div class='w3-row w3-panel w3-red'>
							{{ field.errors }}
						</div>
						{% endif %}
						<div class='w3-row '>
							{{ field.help_text }}
						</div>
						</div>
						<br>
					{% endfor %}
					<button type="submit" class='w3-button u4xg_button' style='float:right;'>register</button>
				</form>
			</div>
			
		</div>
		
	</body>
	
</html> 
